<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="名字">
                <el-input v-model="form.schoolnoname" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.ylcode" placeholder="请选择" clearable>
                    <el-option v-for="item in list" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="_confirmbtn" @click="search(1)">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <span class="_exports" @click="exports">导出</span>
            </el-form-item>
        </el-form>
        <div class="list" >
            <table>
                <thead>
                    <th v-for="(name, index) in ths[type - 1]" :key="index">{{ name }}</th>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in page.list" :key="index">
                        <td>{{ item.personId }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ type == 2 ? item.department : item.classname }}</td>
                        <td>{{ type == 2 ? item.phone : item.sex == '1' ? '男' : '女' }}</td>
                        <td>{{ item.tp }}</td>
                        <td>{{ item.createtime }}</td>
                        <td>{{ item.address }}</td>
                        <td>{{ item.healthcode }}</td>
                        <td>
                            <span @click="details(item, type)">详情</span>
                        </td>
                    </tr>
                    <tr v-if="!page.list || page.list && page.list.length == 0">
                        <td colspan="9" class="table_list_empty">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <pagination ref="pagination" :page="page" @pagination="search"></pagination>
    </div>
</template>

<script>
import store from '@/store'

export default {
    name: 'tables',
    props: ['type'],
    data () {
        return {
            store,
            form: {},
            page: {
                total: 0,
                list: [],
                query: {
                    pagesize: 5,
                    pagecurrent: 1                    
                }
            },
            list: [
                // { value: '0', label: '正常' },
                // { value: '2', label: '留院观察' },
                // { value: '18', label: '复课申请' },
                // { value: '11', label: '返校复课' },
                // { value: '14', label: '疑似患者' },
                // { value: '6', label: '返校复工' }
                { value: '17', label: '医疗交接' },
                { value: '7', label: '居家隔离' },
                { value: '5', label: '医疗隔离' }
            ],
            ths: [
                ['学生ID', '名字', '班级', '性别', '最新温测', '测温时间', '地点', '当前状态', '操作'],
                ['职工ID', '名字', '部门', '联系方式', '最新温测', '测温时间', '地点', '当前状态', '详情']
            ],
            isShow: false,
        }
    },
    watch: {
        isShow() {
            this.$emit('iw', this.isShow)
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        details(v, type) {
            this.$router.push({
                path: '/monitorDetails',
                query: { personId: v.personId, type: type }
            })
        },
        search(index) {
            this.$http('medicalhandover/page', { ...this.form, ...this.page.query, userType: this.type + '' }).then(({ data, code, message }) => {
                if (code == 200) {
                    this.isShow = false
                    this.page.total = data.total
                    this.page.list = data.records
                    if (index && index == 1) this.$notify.success(message)
                } else {
                    this.page.total = 0
                    this.page.list = []
                    this.isShow = true
                }
            })
        },
        exports() {
            location.href = `http://wcxt.bjyulinkeji.com/health/getPersonHealths/dataexport?ranklevel=4&schoolno=${store.state.classinfo.schoolno}&personType=${this.type}&yljj=1`
        }
    }
}
</script>

<style lang="less" scoped>
.list {
    padding: 0 20px;
    background-color: #000418;
    table {
        table-layout: fixed;
        width: 100%;
    }
    th, td {
        padding: 20px 12px;
        font-size: 14px;
        border: 2px solid rgba(243, 246, 250, .2);
        word-wrap: break-word;
        &:first-child {
          border-left: 0;
        }
        &:last-child {
          border-right: 0;
        span {
            cursor: pointer;
            color: #2a36e0;
        }
        span + span {
            margin-left: 30px;
        }
      }
    }
    tr:last-child td {
        border-bottom: 0;
    }
    th {
        border-top: 0;
        color: rgba(255, 255, 255, .8);}
    td {
        text-align: center;
        color: rgba(255, 255, 255, .8);
    }
  }
  ._t {
      margin-top: 30px;
  }
</style>